<template>
  <el-scrollbar v-if="list.length !== 0" :noresize="false" :class="{'write-border': isWriteBorder}">
    <div class="global-nav-flex">
      <div class="global-nav-btns">
        <template v-for="(item, index) in list">
          <div v-if="!item.noshow" :key="index" class="btns-item" :class="[{ active: active === item[prop.value], disable: item.disable }]">
            <div class="nav-item" @click="handleclick(item, index, item[prop.value])">
              <i :class="[item.icon]" />
              {{ item[prop.label] }}
            </div>
          </div>
        </template>
      </div>
      <div class="global-nav-op" :style="buttonStyle">
        <slot name="button" />
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
  /**
   * 按钮操作区
   * @param {Array} list
   * label 按钮名称
   * icon 按钮icon
   * click 按钮事件
   * noshow 是否不展示
   * disabled 是否禁用
   */
  export default {
    props: {
      prop: {
        type: Object,
        default: () => {
          return {
            label: 'label',
            value: 'active'
          }
        }
      },
      list: {
        type: Array,
        default: () => {
          return []
        }
      },
      active: {
        type: [String, Number],
        default: ''
      },
      // 右边区域按钮样式
      buttonStyle: {
        type: Object,
        default: () => {
          return {}
        }
      },
      isWriteBorder: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      handleclick(item, index, active) {
        this.$emit('change', {
          data: item,
          index,
          active
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .write-border {
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
  }
  .global-nav-flex {
    display: flex;
    height: 49px;
    line-height: 48px;

    .global-nav-btns {
      flex: 1 1 auto;
    }
    .global-nav-op {
      flex: 1 1 165px;
      text-align: right;
    }
  }
  .global-nav-btns {
    white-space: nowrap;
    .btns-item {
      display: inline-block;
      padding-right: 40px;
      font-size: 16px;
      .nav-item {
        cursor: pointer;
        user-select: none;
        position: relative;
        color: #969899;
        // padding: 0 8px;
      }
      &.disable {
        cursor: not-allowed;
          &:hover {
          .nav-item {
            color: #969899;
          }
        }
      }
      &:hover {
        .nav-item {
          color: #409EFF;
        }
      }

      .el-button--text {
        color: #333;
      }
      &.active {
        // .nav-item::after {
        //   content: '';
        //   position: absolute;
        //   left: 0;
        //   bottom: 3px;
        //   border-radius: 8px;
        //   width: 30px;
        //   border-bottom: 2px solid #409EFF;
        // }
        .nav-item {
          color: #409EFF;
          font-weight: bold;
        }
      }
    }
  }
</style>
